<!DOCTYPE html>
<html lang="en">
<head>
	<title>SAP Network Monitoring</title>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<link rel="stylesheet" href="/vendor/bootstrap/bootstrap.min.css" />
	<link rel="stylesheet" href="/vendor/bootstrap/bootstrap-responsive.min.css" />
	<!--<link href="https://cdn.bootcss.com/bootstrap-modal/2.2.6/css/bootstrap-modal.min.css" rel="stylesheet">-->
	<!--<link href="https://cdn.bootcss.com/bootstrap-modal/2.2.6/css/bootstrap-modal-bs3patch.min.css" rel="stylesheet">-->
	<link rel="stylesheet" href="/vendor/bootstrap/bootstrap-multiselect.css">
    <link rel="stylesheet" href="/vendor/confirm/jquery-confirm.min.css" />
	<!--<link rel="stylesheet" href="./static/css/uniform.css" />-->
	<!--<link rel="stylesheet" href="./vendor/bootstrap/select2.css" />-->
	<!--<link rel="stylesheet" href="./vendor/bootstrap/bootstrap-switch.min.css" />-->
	<link rel="stylesheet" href="/static/css/matrix-style.css" />
	<link rel="stylesheet" href="/static/css/matrix-media.css" />
	<link href="/vendor/font-awesome/css/font-awesome.css" rel="stylesheet" />

</head>
<body>

<!--Header-part-->
{{>topHeader}}
<!--close-Header-part-->

<!--sidebar-menu-->
<div id="sidebar"> </div>


<div id="content">
	<div id="content-header">
		<div id="breadcrumb"> <a href="/" title="返回首页" class="tip-bottom"><i class="icon-home"></i> 首页</a> <a href="./history.html" class="current">历史记录</a> </div>
		<!--<h1>监控任务列表</h1>-->
	</div>
	<div class="container-fluid history">
		<!--<hr>-->
		<div class="panel-header">
			<form class="form-inline" method="post" action="#">
				监控任务:
                <select name="taskList" id="taskList">
				</select>
			</form>
		</div>
		<div class="row-fluid">

			<div class="condition">
				监测点：
                <span class="bracket">(</span>
                <select class="filterMointor" id="country"><option value="">国家</option></select>
                <select class="filterMointor" id="province"><option value="">省份</option></select>
                <select class="filterMointor" id="city"><option value="">城市</option></select>
                <span class="bracket">)</span>

                <select name="monitorList" id="monitorList">
				</select>

			</div>
            <div class="condition">
                监测时间范围:
                <select name="interval" id="interval">
                    <!--<option value=0>最新状态</option>-->
                    <option value=30>最近30分钟</option>
                    <option value=60>最近1小时</option>
                    <option value=180>最近6小时</option>
                    <option value=720>最近12小时</option>
                    <option value=1440>最近1天</option>
                    <option value=2880>最近2天</option>
                    <option value=10080>最近1周</option>
                </select>

            </div>

			<div class="span12 dataList">
				<div class="widget-box collapsible fullWidth">
					<div class="widget-title">
						<a href="#collapseOne" data-toggle="collapse">
							<span class="icon"><i class="icon-arrow-right"></i></span>
							<h5>基础信息</h5>
						</a>
					</div>
					<div class="collapse in" id="collapseOne">
						<div class="widget-content baseChart">
							IP地址: <span class="ipInfo"></span>
						</div>
					</div>
				</div>
				<div class="widget-box collapsible fullWidth">
					<div class="widget-title">
						<a href="#collapse2" data-toggle="collapse">
							<span class="icon"><i class="icon-time"></i></span>
							<h5>响应时间变化</h5>
						</a>
					</div>
					<div class="collapse in" id="collapse2">
						<div class="widget-content">
							<div id="responseTime">

							</div>
						</div>
					</div>
				</div>
				<div class="widget-box collapsible subWidth">
					<div class="widget-title">
						<a href="#collapse3" data-toggle="collapse">
							<span class="icon"><i class="icon-random"></i></span>
							<h5>带宽变化</h5>
						</a>
					</div>
					<div class="collapse in" id="collapse3">
						<div class="widget-content">
							<div id="bandWidth">

							</div>
						</div>
					</div>
				</div>
				<div class="widget-box collapsible subWidth floatRight">
					<div class="widget-title">
						<a href="#collapse4" data-toggle="collapse">
							<span class="icon"><i class="icon-screenshot"></i></span>
							<h5>可用性分析</h5>
						</a>
					</div>
					<div class="collapse in" id="collapse4">
						<div class="widget-content">
							<div id="usable">

							</div>
						</div>
					</div>
				</div>
				<div class="widget-box collapsible subWidth">
					<div class="widget-title">
						<a href="#collapse5" data-toggle="collapse">
							<span class="icon"><i class="icon-screenshot"></i></span>
							<h5>稳定性分析</h5>
						</a>
					</div>
					<div class="collapse in" id="collapse5">
						<div class="widget-content">
							<div id="stability">

							</div>
						</div>
					</div>
				</div>
				<div class="widget-box collapsible subWidth floatRight">
					<div class="widget-title">
						<a href="#collapse6" data-toggle="collapse">
							<span class="icon"><i class="icon-screenshot"></i></span>
							<h5>超时分析</h5>
						</a>
					</div>
					<div class="collapse in" id="collapse6">
						<div class="widget-content">
							<div id="timeout">

							</div>
						</div>
					</div>
				</div>
				<div class="widget-box collapsible fullWidth">
					<div class="widget-title">
						<a href="#collapse7" data-toggle="collapse">
							<span class="icon"><i class="icon-th-list"></i></span>
							<h5>监测历史</h5>
						</a>

						<div style="float:right;display: inline-block;">
							<select name="category" id="historyCategory">
								<option value="">全部</option>
								<option value=0>时延监测</option>
								<option value=2>超时监测</option>
								<option value=1>稳定性监测</option>
							</select>
						</div>
					</div>
					<div class="collapse in" id="collapse7" style="width: 100%;">
						<div class="widget-content nopadding monitorHistory">
							<table class="table table-bordered historytable">
								<thead>
								<tr>
                                    <th>开始时间</th>
                                    <th>结束时间</th>
									<th>收集时间</th>
									<th>类型</th>
									<th>响应时间(ms)</th>
									<th>可用性</th>
									<th>错误码</th>
									<th>带宽(KB/S)</th>
								</tr>
								</thead>
								<tbody>


								</tbody>
							</table>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>


<!--Footer-part-->
{{>bottomFotter}}
<!--end-Footer-part-->
<script type="text/javascript" src="/vendor/echart/echarts.min-full.js"></script>
<script type="text/javascript" src="/static/js/matrix.history.js"></script>

</body>
</html>
